<template>
  <div class="rank">
    <div
      v-for="item of menu"
      :key="item.id"
      class="leaderboard"
      :class="{ active: activeName === item.id ? true : false }"
      @click="choose(item.id)"
    >
      {{ item.label }}
    </div>
  </div>

  <RankCard :rank="props.rank.weekRanking" v-if="activeName === 2 ? true : false"></RankCard>
  <RankCard :rank="props.rank.ranking" v-if="activeName === 1 ? true : false"></RankCard>
  <ContentRank :dataList="props.contentList" v-if="activeName === 3 ? true : false"></ContentRank>
</template>

<script setup>
import { ref } from 'vue'
import RankCard from './RankCard.vue'
import ContentRank from './ContentRank.vue'

const props = defineProps({
  contentList: {
    type: Array,
    required: true,
    default: () => [] // 提供一个安全的默认值
  },
  rank: {
    type: Array,
    required: true,
    default: () => [] // 提供一个安全的默认值
  }
})

const menu = ref([
  { id: 1, label: '综合榜' },
  { id: 2, label: '周榜' },
  { id: 3, label: '文章推荐' }
])

const activeName = ref(1)

const choose = (id) => {
  activeName.value = id
}
</script>

<style scoped>
.rank {
  border: 1px #eee solid;
  display: flex;
  justify-content: space-around;
}

.leaderboard {
  padding: 10px;
}

.leaderboard:hover {
  color: #ff6200;
  cursor: pointer;
}
.active {
  border-bottom: #ff6200 3px solid;
  color: #ff6200;
}
</style>
